<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>qf</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发表</button>
    <ul>


    </ul>

    <script>
        /*  
            1.  获取输入框内容  表单.value  
            2.  按钮有个点击事件  .onclick 
            3.  每个留言创建一个 li 元素节点  并且把输入框的内容放到li中 
            // createElement      元素.innerHTML  
            4.  保证新的留言放在最上面
            // ul.insertBefore(新的节点,第一个子元素节点的前面);  
        
        */

        var textareas = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var uls = document.querySelector('ul');




        btn.onclick = function () {
            if(textareas.value == ''){
                // 表单的value是字符串类型  如果用户没有输入  那么 就是空字符串
                alert('请输入留言内容');
                return;
            }
            var li = document.createElement('li');
            li.innerHTML = textareas.value;

            uls.insertBefore(li, uls.children[0]);
        }

    </script>
</body>

</html>